import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, Popconfirm, Icon } from 'antd';
import Form  from './components/SearchForm';
import { checkInit } from '@/utils/util';

export interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  loading: boolean,
  list: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>
}

interface IState {
  current: number
}

const ONE_PAGE_SIZE = 10;

@connect(({ group, loading, menu }) => ({
  list: group.list || {},
  loading: loading.effects['group/queryPage'],
  buttons: menu.buttons
}))
class Group extends Component<IProps, IState> {

  readonly state: IState = {
    current: 0
  };

  queryData(offset = 0, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;

    dispatch({
      type: 'group/queryPage',
      payload: {
        pageNum: offset,
        pageSize: size,
      },
    });
  }

  remove = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'group/remove',
      payload: id
    }).then(() => {
      this.queryData()
    });
  };

  initCurrent() {
    this.setState({
      current: 0
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: `group/initCond` }) : this.queryData();
  }

  render() {
    const { buttons, list } = this.props;
    const { data = [], dataCnt } = list;
    const btnList = {};
    buttons.forEach(item => {
      btnList[item.name] = item.name
    })
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      id: item.id,
      name: item.name,
      remark: item.remark,
      roleList: item.groupRoleList && Array.isArray(item.groupRoleList) ? (item.groupRoleList.map(it => it.role.name)).join(' ') : ' ',
      })
    ) : []
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current })
        this.queryData(current)
      },
    };
    const columns = [{
        title: '部门',
        dataIndex: 'name',
      }, {
        title: '用户角色',
        dataIndex: 'roleList'
      }, {
        title: '备注',
        dataIndex: 'remark',
      }, {
        title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{display: 'flex'}}>
            {
              btnList['详情'] ? <>
                <Link to={`/data/group/${record.id}/details`}>详情</Link>
                <Divider type="vertical" />
              </> : null
            }
            {
              btnList['编辑'] ? <>
                <Link to={`/data/group/${record.id}/update`}>编辑</Link>
                <Divider type="vertical" />
              </> : null
            }
            {
              btnList['角色配置'] ? <>
                <Link to={`/data/group/${record.id}/auth`}>角色分配</Link>
                <Divider type="vertical" />
              </> : null
            }
            {
              btnList['删除'] ? <>
                <Popconfirm 
                  title="请确认是否删除?" 
                  onConfirm={() => {this.remove(record.id)}} 
                  okText="确定" 
                  cancelText="取消"
                  icon={<Icon type="exclamation-circle" />}
                >
                  <a>删除</a>
                </Popconfirm>
              </> : null
            }
          </div>
        )}
      }];
    return (
      <>
        <Form current={ this.state.current } initCurrent={this.initCurrent} new={!!btnList['新增']}/>
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          loading={this.props.loading}
          bordered
        />
      </>
    );
  }
}

export default Group;
